<template>
     <div>

       <el-dialog
           title="提示"
           :visible.sync="dialogVisible"
           width="30%"
           :before-close="handleClose">
         <span>
           <el-form :model="book" ref="" :rules="rules">
              <el-form-item prop="title">
                  图书名称：<el-input v-model="book.title"></el-input>
              </el-form-item>
              <el-form-item prop="isbn">
                  图书isbn：<el-input  v-model="book.isbn"></el-input>
              </el-form-item>
              <el-form-item prop="author">
                  图书作者：<el-input v-model="book.author"></el-input>
              </el-form-item>
              <el-form-item prop="amount">
                  图书数量：<el-input v-model="book.amount"></el-input>
              </el-form-item>
              <el-form-item prop="cid">
                 出版社：
              <el-select v-model="book.cid" placeholder="请选择出版社" size="small" style="margin-right: 5px">
                <el-option
                    v-for="item in cates"
                    :key="item"
                    :label="item.cname"
                    :value="item.cid">
                </el-option>
            </el-select>
              </el-form-item>
             <el-form-item prop="descb">
                 图书简介：<el-input v-model="book.descb"></el-input>
             </el-form-item>
              <el-form-item prop="pic">
                  图书图片：<el-input ></el-input>
              </el-form-item>
           </el-form>
         </span>
         <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
       </el-dialog>

       <div id="btn">
       <el-button type="success" @click="dialogVisible = true">新增</el-button>
       <el-button type="success">导入</el-button>
       <el-button type="success">导出</el-button>
       </div>
       <div id="search">
       <el-input placeholder="请输入图书名称" style="width: 300px;margin-right: 5px"></el-input>
       <el-button type="primary">搜索</el-button>
       </div>
       <div id="tab">
       <el-table
           :data="tableData"
           stripe
           style="width: 100%">
         <el-table-column
             prop="bid"
             label="编号"
         >
         </el-table-column>
         <el-table-column
             prop="isbn"
             label="出版号"
             >
         </el-table-column>
         <el-table-column
             prop="title"
             label="书名"
         >
         </el-table-column>
         <el-table-column
            prop="author"
            label="作者"
         >
         </el-table-column>
         <el-table-column
             prop="amount"
             label="库存"
             sortable
         >
         </el-table-column>
         <el-table-column
             prop="cname"
             label="出版社"
         >
         </el-table-column>
       </el-table>
     </div>
     </div>
</template>

<script>
export default {
  name: "Books",
  data(){
    return{
      dialogVisible: false,
      book:{
        bid: '',
        isbn: '',
        title: '',
        author: '',
        amount: '',
        cid: '',
        pic: '',
        descb: ''
      },
      //图书集合
      tableData: [],
      //出版社集合
      cates: [],
    }
  },
  methods:{
    getCategorys(){


       this.getRequest("/book/category").then(resp =>{
         if(resp.data.flag) {
           this.cates = resp.data.data;
         }else{
            this.$message.error("数据加载失败");
           // this.$message({message:'数据加载失败',type: 'error'})
         }
       })
    },
    findBooks(){

           this.getRequest("book/books").then(resp =>{
           this.tableData=resp.data.data;
       })
    }
  },
   created() {
     this.findBooks();
     this.getCategorys();
   }
}
</script>

<style scoped>
  #btn{
    float: left;
    margin: 5px 0px 5px 0px;

  }
  #search{
    margin-bottom: 5px;
  }
</style>
